import React, { FC } from "react";
// import { useRequest } from "ahooks";
// import { getUserInfoService } from '../services/user'
import { UserOutlined } from '@ant-design/icons'
import { Link, useNavigate } from "react-router-dom";
import { MenuProps, Dropdown, message } from 'antd'
import { removeToken } from '.././utils/user-token'
import useGetUserInfo from "../hooks/useGetUserInfo";
import { useDispatch } from "react-redux";
import { logoutReducer } from "../store/userReducer";


const UserInfo: FC = () => {
    const {username,nickname}=useGetUserInfo()
    const nav = useNavigate()
    const dispatch=useDispatch()
    function logout() {
        dispatch(logoutReducer()) //清空redux
        removeToken()
        message.success('登出成功')
        nav('/login')
    }
    const items: MenuProps['items'] = [
        {
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    个人中心
                </a>
            ),
            key: '0',
        },
        {
            type: 'divider',
        },
        {
            label: (
                <span onClick={logout}>
                    退出
                </span>
            ),
            key: '1',
        },
    ];
    // const { data } = useRequest(getUserInfoService)
    // const { username, nickname } = data || {}
    const UserInfo = (
        <>
            <Dropdown menu={{ items }}>
                <span><UserOutlined />   {nickname}</span>
            </Dropdown>
        </>
    )
    const Login = (
        <Link to={'/login'}>登录</Link>
    )
    return <>
        <div>{username ? UserInfo : Login}</div>
    </>
}

export default UserInfo